<template>
  <div id="app">
    <!-- Background Animation -->
    <BackgroundAnimation />
    
    <!-- Navigation Header -->
    <AppHeader />
    
    <!-- Main Content -->
    <main class="main-content">
      <router-view v-slot="{ Component }">
        <transition name="page" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </main>
    
    <!-- Footer -->
    <AppFooter />
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useAuthStore } from './stores/auth'
import { useStoriesStore } from './stores/stories'
import AppHeader from './components/AppHeader.vue'
import AppFooter from './components/AppFooter.vue'
import BackgroundAnimation from './components/BackgroundAnimation.vue'

// Initialize stores
const authStore = useAuthStore()
const storiesStore = useStoriesStore()

onMounted(() => {
  // Initialize authentication state
  authStore.initializeAuth()
  
  // Load stories from localStorage
  storiesStore.loadStories()
})
</script>

<style scoped>
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

.main-content {
  flex: 1;
  position: relative;
  z-index: 1;
  padding-top: 80px; /* Account for fixed header */
}

/* Page Transitions */
.page-enter-active,
.page-leave-active {
  transition: all 0.3s ease-in-out;
}

.page-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

.page-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}
</style>
